<template>
	<view class="detail-container">
		<view class="status-card card">
			<view class="status-icon" :class="getStatusClass(serviceDetail.status)">
				<text class="iconfont" :class="getStatusIcon(serviceDetail.status)"></text>
			</view>
			<view class="status-info">
				<view class="status-text">{{ serviceDetail.status }}</view>
				<view class="status-desc">{{ getStatusDesc(serviceDetail.status) }}</view>
			</view>
		</view>
		
		<view class="info-section card">
			<view class="section-title">水产品信息</view>
			<view class="info-item">
				<text class="label">产品名称/规格</text>
				<text class="value">{{ serviceDetail.product_name }}</text>
			</view>
			<view class="info-item">
				<text class="label">数量</text>
				<text class="value">{{ serviceDetail.quantity }}</text>
			</view>
			<view class="info-item">
				<text class="label">单价</text>
				<text class="value">¥{{ parseFloat(serviceDetail.unit_price).toFixed(2) }}</text>
			</view>
			<view class="info-item">
				<text class="label">总金额</text>
				<text class="value price">¥{{ parseFloat(serviceDetail.total_amount).toFixed(2) }}</text>
			</view>
		</view>
		
		<view class="info-section card">
			<view class="section-title">配送信息</view>
			<view class="info-item">
				<text class="label">期望送达时间</text>
				<text class="value">{{ formatDate(serviceDetail.expected_delivery_time) }}</text>
			</view>
			<view class="info-item">
				<text class="label">配送地址</text>
				<text class="value">{{ serviceDetail.delivery_address }}</text>
			</view>
			<view class="info-item">
				<text class="label">联系人</text>
				<text class="value">{{ serviceDetail.contact_name }}</text>
			</view>
			<view class="info-item">
				<text class="label">联系电话</text>
				<text class="value">{{ serviceDetail.contact_phone }}</text>
			</view>
		</view>
		
		<view class="info-section card">
			<view class="section-title">申请信息</view>
			<view class="info-item">
				<text class="label">申请时间</text>
				<text class="value">{{ formatDate(serviceDetail.application_time) }}</text>
			</view>
			<view class="info-item" v-if="serviceDetail.actual_delivery_time">
				<text class="label">实际送达时间</text>
				<text class="value">{{ formatDate(serviceDetail.actual_delivery_time) }}</text>
			</view>
		</view>
		
		<view class="rating-section card" v-if="serviceDetail.status === '已评价'">
			<view class="section-title">评价信息</view>
			<view class="rating-stars">
				<text 
					v-for="i in 5" 
					:key="i" 
					class="star iconfont icon-star" 
					:class="{ 'active': i <= serviceDetail.rating }"
				></text>
				<text class="rating-text">{{ serviceDetail.rating }} 分</text>
			</view>
			<view class="rating-content" v-if="serviceDetail.review_content">
				{{ serviceDetail.review_content }}
			</view>
			<view class="rating-content empty" v-else>
				未填写评价内容
			</view>
		</view>
		
		<view class="action-buttons" v-if="showActions">
			<button 
				class="action-btn cancel-btn" 
				v-if="serviceDetail.status === '待受理' || serviceDetail.status === '已确认备货中'"
				@click="cancelDelivery"
			>取消申请</button>
			
			<button 
				class="action-btn rate-btn" 
				v-if="serviceDetail.status === '已送达'"
				@click="goToRate"
			>评价服务</button>
		</view>
	</view>
</template>

<script>
	import { getWaterDeliveryDetail, cancelWaterDelivery } from '@/api/services.js'
	import { request } from '@/api/request.js'
	
	export default {
		data() {
			return {
				serviceId: null,
				serviceDetail: {},
				loading: true,
				showActions: false,
				rawApiResponse: null // 存储原始API响应
			}
		},
		onLoad(options) {
			if (options.id) {
				this.serviceId = options.id
				this.getServiceDetail()
			} else {
				uni.showToast({
					title: '参数错误',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		},
		methods: {
			// 获取服务详情
			async getServiceDetail() {
				this.loading = true
				try {
					// 获取原始API响应
					const rawResponse = await request({
						url: `/api/services/water-deliveries/${this.serviceId}/`,
						method: 'GET'
					})
					
					console.log('送水服务详情原始数据:', JSON.stringify(rawResponse, null, 2))
					this.rawApiResponse = rawResponse
					
					// 使用常规处理方式
					const res = await getWaterDeliveryDetail(this.serviceId)
					console.log('格式化后的送水服务详情:', JSON.stringify(res, null, 2))
					
					this.serviceDetail = res
					
					// 检查是否为当前用户的申请
					const userInfo = uni.getStorageSync('userInfo')
					if (userInfo && userInfo.userId === this.serviceDetail.applicant_user) {
						this.showActions = true
					}
				} catch (error) {
					uni.showToast({
						title: '获取详情失败',
						icon: 'none'
					})
					console.error('获取送水服务详情失败', error)
				} finally {
					this.loading = false
				}
			},
			
			// 格式化日期
			formatDate(dateString) {
				if (!dateString) return ''
				const date = new Date(dateString)
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
			},
			
			// 获取状态对应的样式类
			getStatusClass(status) {
				switch (status) {
					case '待受理':
						return 'status-pending'
					case '已确认备货中':
					case '配送中':
						return 'status-processing'
					case '已送达':
					case '已评价':
						return 'status-completed'
					case '已取消':
						return 'status-cancelled'
					default:
						return ''
				}
			},
			
			// 获取状态对应的图标
			getStatusIcon(status) {
				switch (status) {
					case '待受理':
						return 'icon-clock'
					case '已确认备货中':
						return 'icon-package'
					case '配送中':
						return 'icon-delivery'
					case '已送达':
						return 'icon-check'
					case '已评价':
						return 'icon-star'
					case '已取消':
						return 'icon-close'
					default:
						return 'icon-info'
				}
			},
			
			// 获取状态对应的描述
			getStatusDesc(status) {
				switch (status) {
					case '待受理':
						return '您的送水申请已提交，等待管理员受理'
					case '已确认备货中':
						return '管理员已确认您的申请，正在备货中'
					case '配送中':
						return '您的订单正在配送中，请保持电话畅通'
					case '已送达':
						return '您的订单已送达，请及时评价'
					case '已评价':
						return '感谢您的评价，期待再次为您服务'
					case '已取消':
						return '您已取消此次送水服务'
					default:
						return ''
				}
			},
			
			// 取消送水服务
			cancelDelivery() {
				uni.showModal({
					title: '确认取消',
					content: '确定要取消此送水服务吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								await cancelWaterDelivery(this.serviceId)
								uni.showToast({
									title: '取消成功',
									icon: 'success'
								})
								// 刷新详情
								this.getServiceDetail()
							} catch (error) {
								uni.showToast({
									title: '取消失败',
									icon: 'none'
								})
								console.error('取消送水服务失败', error)
							}
						}
					}
				})
			},
			
			// 跳转到评价页
			goToRate() {
				uni.navigateTo({
					url: `/pages/services/water-delivery/rate?id=${this.serviceId}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.detail-container {
		padding: 20rpx;
		background-color: #F8F8F8;
		min-height: 100vh;
		
		.status-card {
			display: flex;
			align-items: center;
			padding: 30rpx;
			margin-bottom: 20rpx;
			
			.status-icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 30rpx;
				
				&.status-pending {
					background-color: rgba(255, 153, 0, 0.1);
					color: #ff9900;
				}
				
				&.status-processing {
					background-color: rgba(41, 121, 255, 0.1);
					color: #2979ff;
				}
				
				&.status-completed {
					background-color: rgba(25, 190, 107, 0.1);
					color: #19be6b;
				}
				
				&.status-cancelled {
					background-color: rgba(153, 153, 153, 0.1);
					color: #999;
				}
				
				.iconfont {
					font-size: 40rpx;
				}
			}
			
			.status-info {
				flex: 1;
				
				.status-text {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				
				.status-desc {
					font-size: 26rpx;
					color: #666;
				}
			}
		}
		
		.info-section {
			margin-bottom: 20rpx;
			
			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				border-left: 8rpx solid #2979ff;
			}
			
			.info-item {
				display: flex;
				margin-bottom: 15rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.label {
					width: 180rpx;
					font-size: 28rpx;
					color: #666;
				}
				
				.value {
					flex: 1;
					font-size: 28rpx;
					color: #333;
					
					&.price {
						color: #ff5a5f;
						font-weight: bold;
					}
				}
			}
		}
		
		.rating-section {
			margin-bottom: 20rpx;
			
			.rating-stars {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				
				.star {
					font-size: 36rpx;
					color: #ddd;
					margin-right: 10rpx;
					
					&.active {
						color: #ffcc00;
					}
				}
				
				.rating-text {
					margin-left: 20rpx;
					font-size: 28rpx;
					color: #333;
				}
			}
			
			.rating-content {
				font-size: 28rpx;
				color: #333;
				background-color: #f9f9f9;
				padding: 20rpx;
				border-radius: 8rpx;
				
				&.empty {
					color: #999;
				}
			}
		}
		
		.action-buttons {
			display: flex;
			justify-content: center;
			margin-top: 40rpx;
			margin-bottom: 40rpx;
			
			.action-btn {
				width: 300rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				font-size: 30rpx;
				margin: 0 20rpx;
				
				&.cancel-btn {
					background-color: #f8f8f8;
					color: #666;
					border: 1rpx solid #ddd;
				}
				
				&.rate-btn {
					background-color: #2979ff;
					color: #fff;
				}
			}
		}
	}
</style> 